<template>
	<view class="">
		<view class="u-border u-p-10 u-font-25" v-for="(item,index) in comments" :key="index">
			<u-row>
				<u-col span="2">
					<view class="">
						<u-avatar :src="item.img"></u-avatar>
					</view>
				</u-col>
				<u-col span="10">
					<view class="u-m-l-20">
						<view class="">
							<text class="nickname">{{item.nickname}}:</text>
							<text class="content">{{item.content}}</text>
						</view>
						<view class="">
							<view class="bottom sort">{{item.time}}</view>
							<view class="bottom sort right">
								<u-icon name="thumb-up"></u-icon>
								({{item.give_like}})
							</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				mvdetail: {}, //介绍
				comments: [], //评论
				list: [{
						name: 'MV介绍'
					},
					{
						name: '评论'
					}
				],
				curNow: 0
			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			}
		},
		onLoad(option) {
			let id = option.id;
			//评论
			uni.request({
				url: "https://www.codeman.ink/api/comment/music",
				data: {
					id: id
				},
				method: 'GET',
				success: (res) => {
					// console.log(res.data.hotComments);
					res.data.hotComments.forEach((item, index) => {
						let user = {};
						user.nickname = item.user.nickname;
						user.img = item.user.avatarUrl;
						user.content = item.content;
						user.time = item.time;
						var tamp = new Date(user.time);
						var year = tamp.getFullYear();
						var month = tamp.getMonth() + 1;
						var day = tamp.getDate();
						var hours = (tamp.getHours() < 10) ? "0" + tamp.getHours() : tamp.getHours();
						var minutes = (tamp.getMinutes() < 10) ? "0" + tamp.getMinutes() : tamp
							.getMinutes();
						user.time = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes;
						user.give_like = item.likedCount;
						this.comments.push(user);
					})
					console.log(this.comments);
				}
			})
		}
	}
</script>

<style>
	.play {
		width: 100%;
	}
	
	.nickname {
		color: #0c73c2;
	}
	
	.content {
		color: #7d7d94;
	}
	
	.bottom {
		color: #999999;
	}
	
	.sort {
		display: inline-block;
	}
	
	.right {
		float: right;
	}
</style>
